* {
    padding: 0;
    margin: 0;
}

.product_body {
    .location {
        position: fixed;
        left: 0;
        background: white;
        width: 100vw;
        height: 5vh;
        display: flex;
        align-items: center;

        >div:nth-child(1) {
            width: 25px;
            height: 25px;
            background: linear-gradient(to right, rgb(210, 126, 248), rgb(155, 126, 252));
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: 12px;
            color: white;
        }

        >div:nth-child(2) {
            margin-left: 20px;
            display: flex;

            align-items: center;

            >p {
                line-height: 5vh;
                margin: 0;
            }
        }
    }

    width:100vw;
    height: 100vh;
    background: rgb(236, 229, 229);
    position: relative;

    .product_top {
        position: absolute;
        left: 0;
        top: 0;
        width: 100vw;
        height: 6.5vh;
        text-align: center;
        line-height: 6.5vh;
        background: linear-gradient(to right, rgb(210, 126, 248), rgb(155, 126, 252));
        position: relative;

        >span:nth-child(1) {
            position: absolute;
            left: 0;
            top: 0;
            width: 10vw;
            height: 8vh;
            text-align: center;
            line-height: 8vh;
            color: white;
            font-weight: bold;
        }

        >p {
            font-size: 5vw;
            display: inline-block;
            color: rgb(236, 229, 229);
        }

        >span:nth-child(3) {
            position: absolute;
            right: 2vw;
            top: 30%;
            width: 5vw;
            height: 5vw;
            text-align: center;
            line-height: 5vw;
            border-radius: 50%;
            background: white;
            padding: 0;
        }
    }

    .product_xia {
        width: 100%;
        height: 12vh;
        background: white;
        box-shadow: -1px -1px 1px gainsboro;
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;

        >button {
            width: 90%;
            height: 53%;
            border-radius: 30px;
            border: 0;
            font-size: 5vw;
            color: white;
            background: linear-gradient(to right, rgb(210, 126, 248), rgb(155, 126, 252));
        }
    }

    .product_center {
        width: 100vw;
        height: 81.5vh;
        overflow: hidden;

        >div {

            .product_site {
                border-bottom: 1px solid gainsboro;
                width: 100vw;
                height: 12.5vh;
                display: flex;
                justify-content: center;
                background: white;

                >div:nth-child(1) {
                    width: 18%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    >div {
                        width: 40px;
                        height: 40px;
                        background: linear-gradient(to right, rgb(210, 126, 248), rgb(155, 126, 252));
                        border-radius: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        >span {
                            color: white;
                        }
                    }
                }

                >div:nth-child(2) {
                    width: 68%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    >div:nth-child(1) {
                        width: 100%;
                        height: 50%;
                        display: flex;
                        align-items: center;

                        >span:nth-child(1) {
                            font-size: 18px;
                        }

                        >span:nth-child(2) {
                            margin-left: 20px;
                            color: rgb(114, 113, 113);
                            font-size: 18px;

                        }
                    }

                    >div:nth-child(2) {
                        width: 100%;
                        height: 50%;

                        >p {
                            font-size: 15px;
                        }

                    }
                }

                >div:nth-child(3) {
                    width: 8%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    >span {
                        color: rgb(155, 148, 148);
                    }
                }
            }

            .product_ding {
                width: 100vw;
                display: flex;
                background: white;
                justify-content: center;
                flex-wrap: wrap;

                >div:nth-child(1) {
                    width: 95vw;
                    height: 5vh;
                    line-height: 5vh;
                    font-size: 16px;
                    border-bottom: 1px solid gainsboro;
                }

                >div:nth-child(2) {
                    width: 95vw;

                    >div {
                        width: 95vw;
                    display: flex;
                            align-items: center;
                        >div:nth-child(1) {
                            width: 19vw;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            >img {
                                width: 10vw;
                                height: 4vh;
                                border-radius: 50%;
                            }
                        }

                        >div:nth-child(2) {
                            width: 59.5vw;
                            display: flex;
                            flex-wrap: wrap;
                            align-content: space-around;
                            margin-top: 4vh;
                            >span {
                                width: 100%;
                            }
                            >p{
                                height: 3vh;
                                line-height: 3vh;
                                margin: 0;
                            }
                        }

                        >div:nth-child(3) {
                            width: 16.5vw;
                            display: flex;
                            flex-wrap: wrap;
                            align-items: center;
                            >p{
                                margin: 0;
                            }
                        }
                    }

                }
            }

            .product_Jia {
                width: 100vw;
                height: 7.5vh;
                background: white;
                display: flex;
                flex-direction: column;

                >div:nth-child(1) {
                    display: flex;
                    width: 95%;
                    align-items: center;
                    margin: 0 auto;
                    height: 100%;
                    font-size: 4vw;

                    >span:nth-child(2) {
                        font-weight: bold;
                    }
                }
            }

            .product_bottom {
                .hen {
                    border-radius: 50%;
                    background: red;
                }

                .zhi {
                    display: flex;
                    align-items: center;

                    >span {
                        display: flex;
                        line-height: 50px;
                    }
                }

                width: 100vw;
                height:53vh;
                background: white;
                overflow: hidden;

                >div:nth-child(1) {
                    width: 100%;
                    height: 16%;
                    display: flex;
                    align-items: center;

                    >p {
                        width: 95%;
                        margin: 0 auto;
                        font-size: 4vw;
                        font-weight: bold;
                        color: rgb(147, 150, 154);
                    }
                }
            }
        }

    }
    .succeed_enroll{
        width: 100vw;
        height: 100vh;
        background: white;
        position: absolute;
        left: 0;
        top: 0;
        .succeed_top{
            border-bottom: 1px solid rgb(218, 214, 214);
            width: 100%;
            height: 7vh;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            .back{
                position: absolute;
                top: 30%;
                left: 10px;
                color: gray;
                font-weight: bold;
            }
            >span{
                font-weight: bold;
                font-size: 17px;
            }
            
        }
        .succeed_title{
            width: 100%;
            height: 7vh;
            background:skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            
        }
        .succeed_cont{
            width: 96%;
            margin: 0 auto;
            height: 20vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1px solid rgb(218, 214, 214);
            >div:nth-child(1){
                width: 100%;
                height: 50%;
                display: flex;
                justify-content: center;
                
                .biu{
                    width: 60px;
                    background: white;
                    height: 60px;
                    border-radius: 60px;
                    text-align: center;
                    line-height: 60px;
                    color:rgb(155, 126, 252) ;
                    border: 3px solid rgb(155, 126, 252) ;
                    font-size: 17px;
                    margin-top: 30px;
                }
                .biuo{
                    width: 60px;
                    background: white;
                    height: 60px;
                    border-radius: 60px;
                    text-align: center;
                    line-height: 60px;
                    color:gray ;
                    border: 3px solid gray ;
                    font-size: 17px;
                    margin-top: 30px;
                }
            }
            >div:nth-child(2){
                width: 100%;
                height: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16px;
                font-weight: bold;
            }
           
        }

        .dizhi{

            width: 96%;
            margin: 10px auto;
            height: 12vh;
            display: flex;
            align-content: space-around;
            flex-wrap: wrap;
            >p{
                margin: 0;
                font-size: 14px;
            }
        }
        .succeed_btn{
            width: 100vw;
            height: 9vh;
            display: flex;
            justify-content: center;
            align-items: center;
            >button{
                width: 82vw;
                height: 5.5vh;
                border-radius: 25px;
                border: 0;
                color: white;
                font-weight: bold;
                font-size: 15px;
                background-color: rgb(155, 126, 252);
            }
        }
    }
}

// .icon {
//     width: 1em;
//     height: 1em;
//     vertical-align: -0.15em;
//     fill: currentColor;
//     overflow: hidden;
//   }